<template>
	<view class="load" v-if="!load">
		<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
	</view>
	<view class="friends" v-else>
		<x-scroll :fixed="true" @onRefresh="onRefresh" @scrolltolower="scrolltolower" :refresh="_freshing">
			<view class="list wap" v-if="Array.isArray(msglist) && msglist.length > 0">
				<view class="row item" v-for="item in msglist" :key="item.ID">
					<view class="col_4">
						<view class="cover">
							<view class="red" v-if="item.IsRead == 0"></view>
							<view v-if="item.FromUserID == 0">
								<!-- <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/img/icon_tz@2x.png" mode="aspectFill" /> -->
								通 知
							</view>
							<block v-else>
								<image :src="item.FromUserImgUrl" @click="gotouser(item,index)" mode="aspectFill" />
							</block>
						</view>
					</view>
					<view class="col_19" @click="toDetail(item,index)">
						<view class="hd">
							<view class="title f1">{{ item.Title }}</view>
							<view class="time f3">{{ getTime(item.CreateTime) }}</view>
						</view>
						<view class="ft f2 c2">{{ $util.entitiesToUtf16(item.Content) }}</view>
					</view>
				</view>
			</view>
			<view v-else>
				<u-empty
					mode="list"
					width="64"
					height="64"
					icon="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/172008138599939.png"
					:show="true"
					iconSize="32"
					text="暂无消息!"
				></u-empty>
			</view>
		</x-scroll>
	</view>
</template>

<script>
export default {
	data() {
		return {
			load: false,
			list: [],
			_freshing: true,
			msglist: [],
			PageIndex: 1,
			readList: [],
			xtNum: 0
		};
	},
	async onShow() {
		// this.getMsgList();

		await this.$api.post('/Common/Add_ViewPath', { Path: 'notice', Platform: uni.getStorageSync('platform') });
	},
	onLoad(){
		this.getMsgList();
	},
	onReady() {
		uni.setNavigationBarColor({
			frontColor: '#000000',
			backgroundColor: '#ffffff',
			animation: {
				duration: 400,
				timingFunc: 'easeIn'
			}
		});
	},
	methods: {
		gotouser(e,index){
			this.setRead(e.ID,index);
			this.nav_to(`/pages/user/user_visitor?id=${e.FromUserID}`)
		},
		toNotice(item) {
			this.nav_to('');
		},
		toSing(item) {
			console.log(item);

			// 清空 数字
			this.$im.clearNum(item.conversationID, item.type);
			// id=3333&type=0&name=3333
			const preid = uni.$prefix + item.conversationID;
			this.nav_to(`/pages/im/chat?id=${preid}&type=${item.type}&name=${item.conversationName}`);
		},

		toDetail(e,index) {
			this.setRead(e.ID,index);
			if(e.MessageType == '点赞通知' || e.MessageType == 'superlike'){
				this.nav_to('/pages/user/user_visitor?id='+e.FromUserID)
			}else if (e.Page_Url == '/pages/ball/ball_user_details' && e.Url_Pars.indexOf('type=my') != -1) {
				e.Page_Url = '/pages/ball/ball_details_prebook';
			}else if(e.Page_Url =='/pages/im/chat'){
				let pars = e.Url_Pars
				let strList = pars.split('conversationID=')
				console.log(strList,'strList');
				let aa ='conversationID='+uni.$prefix+strList[1]
				let u = `${e.Page_Url}?${aa}`;
				console.log(u,'uuu');
				this.nav_to(u);
			}else{
				let u = `${e.Page_Url}?${e.Url_Pars}`;

				this.nav_to(u);
			}
			//拼接im对应的前缀，再替换原本的参数，最后跳转
			// const prefix = 'id=' + uni.$prefix
			// let pars = e.Url_Pars
			// const replacedStr = pars.split("id=").join(prefix);
			
		},
		//下拉刷新
		async onRefresh() {
			this.freshLoad = true;
			if (await this.getMsgList()) {
				uni.$emit('triggered');
			} else {
				setTimeout(() => {
					uni.$emit('triggered');
				}, 2000);
			}
		},
		//滚动到底部触发
		async scrolltolower() {
			if (this.isMore) {
				this.PageIndex++;
				this.getMsgList();
			}
		},
		async getMsgList() {
			let res = await this.$api.post('/MessageNotify/MyMessage', {
				PageIndex: this.PageIndex,
				PageSize: 50
			});

			console.log('list====', res.data);
			this.msglist = res.data;
			this.xtNum = res.data.length;
			setTimeout(() => {
				this.load = true;
			}, 1000);
			return true;
		},
		async setRead(id,index) {
			let res = await this.$api.post('/MessageNotify/Read', { ID: id });
			const {code} = res
				if (code == 0 && index) {
					this.msglist[index].IsRead = 1
				}
		}
	}
};
</script>

<style lang="scss">
.friends {
	/deep/ .uni-list-chat {
		background: #111;
	}

	/deep/ .uni-list--border-top {
		background: #333;
	}

	/deep/ .uni-list--border-top {
		background: #333;
	}

	/deep/ .uni-list-chat__content-title {
		color: #333333;
	}

	/deep/ .uni-list-chat__content-note {
		color: #eee;
	}

	/deep/ .uni-list-chat__header-image {
		border-radius: 50%;
	}

	/deep/ .uni-list-chat__header {
		border: none;
	}
}

.item {
	position: relative;
	height: 150rpx;
	align-items: center;
	// border-bottom: 1px solid #fff;
}

.cover {
	position: relative;
	height: 100rpx;
	width: 100rpx;
	background: #444;
	border-radius: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;

	image {
		height: 100%;
		width: 100%;
		border-radius: 50%;
	}

	.red {
		display: flex;
		height: 20rpx;
		width: 20rpx;
		background: #fc4b65;
		position: absolute;
		top: 5rpx;
		right: 5rpx;
		border-radius: 200rpx;
	}
}

.hd {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.ft {
	margin-top: 10rpx;
	color: #333333;
}

.nav {
	height: 44px;

	.nav_left {
		margin-top: 7px;
		height: 30px;
		line-height: 30px;
		font-size: 32rpx;
		color: #fff;
		width: 200rpx;
		display: flex;
		align-items: center;

		// justify-content: center;
		text {
			padding-left: 10rpx;
			font-size: 32rpx;
			color: #fff;
			font-weight: bold;
		}
	}
}
</style>
